<script setup lang="ts">
import { ref } from "vue";
import { FormProps, FormItemProps } from "./utils/types";
import { formRules } from "./utils/rules";
import ReCol from "@/components/ReCol";
import { useStyleHooks } from "@/views/hooks/style";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    dictId: 0,
    code: "",
    value: "",
    isFixed: false,
    sort: 1,
    status: 1,
    remark: ""
  })
});

const { switchStyle } = useStyleHooks();

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

const refreshInfo = (data: FormItemProps) => {
  newFormInline.value = data;
};
const getFormInfo = () => {
  return newFormInline.value;
};

function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef, refreshInfo, getFormInfo });
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="newFormInline"
      label-width="82px"
      :rules="formRules"
    >
      <el-row :gutter="30">
        <re-col :xs="24" :sm="24">
          <el-form-item label="字典编码" prop="code">
            <el-input
              v-model.trim="newFormInline.code"
              clearable
              placeholder="请输入字典编码"
            />
          </el-form-item>
        </re-col>
        <re-col :xs="24" :sm="24">
          <el-form-item label="字典值" prop="value">
            <el-input
              v-model.trim="newFormInline.value"
              clearable
              placeholder="请输入字典值"
            />
          </el-form-item>
        </re-col>
        <re-col :xs="24" :sm="24">
          <el-form-item label="描述" prop="remark">
            <el-input
              v-model.trim="newFormInline.remark"
              clearable
              placeholder="请输入描述"
            />
          </el-form-item>
        </re-col>
        <re-col :value="12" :xs="24" :sm="24">
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="newFormInline.sort"
              class="!w-full"
              :min="1"
              :max="9999"
              controls-position="right"
            />
          </el-form-item>
        </re-col>
        <re-col :xs="24" :sm="24">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="newFormInline.status"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="停用"
              :style="switchStyle"
            />
          </el-form-item>
        </re-col>
      </el-row>
    </el-form>
  </div>
</template>
